import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入 login
import login from '../views/login'
import home from '../views/home'
import question from '../views/question'
import movie from '../views/movie'
import my from '../views/my'
import notfound from '../views/notfound'
import edit from '../views/edit'
import article from '../views/article'
import search from '../views/search'
import result from '../views/result'
import student from '../views/student'

// 导入token工具函数
import { getToken, removeToken } from '../utils/token'

// 导入 Toast轻提示
import { Toast } from 'vant'
// 导入 api接口
import { getUserInfo } from '../api/my'
// 导入 store即可
import store from '../store/index'

Vue.use(VueRouter)

const routes = [
  {
    // 路径
    path: '/login',
    // 组件
    component: login
  },
  {
    path: '/home',
    component: home,
    meta: {
      // 显示 tab
      showTab: true
    }
  },
  {
    path: '/question',
    component: question,
    meta: {
      // 显示 tab
      showTab: true
    }
  },
  {
    path: '/movie',
    component: movie,
    meta: {
      // 显示 tab
      showTab: true
    }
  },
  {
    path: '/my',
    component: my,
    meta: {
      // 显示 tab
      showTab: true,
      // 需要登录
      needLogin: true
    }
  },
  {
    path: '/edit',
    component: edit,
    // 路由元信息
    meta: {
      needLogin: true
    }
  },
  // 文章详情页 需要携带id
  {
    path: '/article/:id',
    name: 'article',
    // 组件
    component: article
  },
  // 搜索页
  {
    path: '/search',
    name: 'search',
    component: search
  },
  // 搜索结构页
  {
    path: '/result',
    name: 'result',
    component: result
  },
  // 搜索结构页
  {
    path: '/student',
    name: 'student',
    component: student,
    meta: {
      // 需要登录
      needLogin: true
    }
  },
  // 404页面的规则
  {
    path: '/notfound',
    component: notfound
  },
  // / 去 home
  {
    path: '/',
    redirect: '/home'
    // component: home
  },
  // 找不到 去 notfound
  {
    path: '*',
    redirect: '/notfound'
  }
]

// 处理路由切换的Promise的reject错误
// 吞掉 没有处理的 promise的错误
const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) {
    // 执行之后 阻断后续代码
    return originalPush.call(this, location, onResolve, onReject)
  }
  return originalPush.call(this, location).catch(err => err)
}

const router = new VueRouter({
  routes
})
// 注册导航守卫
/*
  1. to:去的路由信息
  2. from:来的路由信息
  3. next:下一个
*/
router.beforeEach((to, from, next) => {
  // 不需要登录 阻断后续代码执行
  if (to.meta.needLogin === undefined) {
    return next()
  }
  // 到这 说明需要登录
  const tokenObj = getToken()
  // console.log('tokenObj:', tokenObj)
  // 没有token 去登录
  if (tokenObj === null) {
    // $toast只有在组件中才可以通过this访问
    Toast.fail('请先登录!')
    return next({ path: '/login', query: { back: to.path } })
  }
  // token不为空,本地的vuex中有用户的信息
  // 空对象 也是true
  // 多点一次
  if (store.state.userInfo.name) {
    // 用户信息存在
    return next()
  }
  // 有token token的对错 我不知道
  getUserInfo()
    .then(res => {
      console.log('res:', res)
      // token没有问题
      // 类比于 组件中的 this.$store
      store.commit('setUserInfo', res.data.data)
      next()
    })
    .catch(errRes => {
      // token 有问题 输出对象的形式
      console.dir(errRes)
      if (errRes.response.status === 401) {
        // token有问题
        // 提示用户
        Toast.fail('请先登录!')
        // 删除token
        removeToken()
        console.clear()
        // 去登录页
        return next({ path: '/login', query: { back: to.path } })
      }
    })
  // return next()
})

export default router
